<template>
  <div>
    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-button v-hasPermi="['admin','system:dept:add']" type="primary" small icon="el-icon-plus" class="addBtn" style="margin:10px" size="mini" @click="addDialogVisible = true">新增
      </el-button>

      <!--表格-->
      <tree-table
        class="treeTable"
        :data="treeList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
      >

        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-button v-hasPermi="['admin','system:dept:edit']" type="text" size="mini" @click="editBtn(scope.row.deptId)">编辑</el-button>
          <el-button v-if="scope.row.children===null" v-hasPermi="['admin','system:dept:del']" type="text" size="mini" @click="delBtn(scope.row.deptId)">删除</el-button>
        </template>
      </tree-table>

    </el-card>

    <!--添加菜单对话框-->
    <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="addDialogVisible" width="600px" @close="addHandleClose">
      <el-form ref="addFormRef" :inline="true" :model="addForm" :rules="addFormRules" label-width="80px" size="small">

        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="addForm.deptName" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-cascader
            v-model="addForm.pidList"
            :options="treeList"
            :props="deptTreeProps"
            clearable
            style="width: 450px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="addClick">确 定</el-button>
      </span>
    </el-dialog>

    <!--编辑菜单对话框-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="editDialogVisible" width="600px" @close="editHandleClose">
      <el-form
        ref="editFormRef"
        :inline="true"
        :model="editForm"
        :rules="editFormRules"
        label-width="80px"
        size="small"
      >
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="editForm.deptName" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-cascader
            v-model="editForm.pidList"
            :options="treeList"
            :props="deptTreeProps"
            clearable
            style="width: 450px"
          />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="editClick">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { add, edit, del, treeDept, getDept } from '@/api/system/dept'

export default {
  name: 'Dept',
  data() {
    return {
      activeName: 'first',
      addDialogVisible: false,
      editDialogVisible: false,
      isTop: true,
      deptIdList: [],
      treeList: [],
      deptTreeProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        children: 'children',
        label: 'deptName',
        value: 'deptId'
      },
      columns: [
        {
          label: '部门名称',
          prop: 'deptName',
          minWidth: '150px'
        },
        {
          label: '父级id',
          prop: 'pid'
        },
        {
          label: '层级',
          prop: 'rank'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      addForm: {
        deptName: '',
        pid: undefined
      },
      addFormRules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ]
      },
      editForm: {
        deptName: '',
        pidList: []

      },
      editFormRules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    // 初始化页面列表
    this.initListDept()
  },

  methods: {

    /** 转换部门数据结构 */
    normalizer(node) {
      // 删除没有子节点的children属性
      if (node.children == null || node.children === 'null') {
        delete node.children
      }

      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      }
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },

    // 监听添加菜单对话框的关闭事件，重置表单内容
    addHandleClose() {
      this.$refs.addFormRef.resetFields()
      this.addForm.pidList = []
    },

    // 监听编辑菜单对话框的关闭事件,重置表单内容
    editHandleClose() {
      this.$refs.editFormRef.resetFields()
      this.editForm.pidList = []
    },

    // 添加用户
    addClick() {
      // 1.校验表单
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return
        // 2.发送请求
        add(this.addForm).then(res => {
          if (res.code === 20000) {
            this.$message.success(res.message)
            // 3.刷新数据
            this.initListDept()
          }
          // 4.关闭对话框
          this.addDialogVisible = false
        })
      })
    },

    // 编辑菜单按钮
    editBtn(id) {
      // 1.保存菜单id
      this.editDialogVisible = true
      this.editForm.deptId = id
      // 2.获取菜单详情
      getDept(id).then(res => {
        this.editForm = res.data
      })
    },
    // 确认编辑菜单
    editClick() {
      // 1.发送请求
      edit(this.editForm).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
          // 2.刷新数据
          this.initListDept()
        }
        // 3.关闭对话框
        this.editDialogVisible = false
      })
    },

    // 删除菜单按钮
    delBtn(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认操作
        del(id).then(res => {
          if (res.code === 20000) {
            this.$message.success(res.message)
            // 刷新数据
            this.initListDept()
          }
        })
      })
    },

    // 初始化列表页面
    initListDept() {
      treeDept().then(res => {
        this.treeList = res.data
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.hidden .cache {
  float: left;
}

.addBtn {
  margin: 10px 0;
}
</style>
